<template>
  <a-card :bordered="false">
    <detail-list title="用户信息">
      <detail-list-item term="昵称">{{wxUserInfo.nickname}}</detail-list-item>
      <detail-list-item term="性别">{{wxUserInfo.sex == 1 ? '男' : '女'}}</detail-list-item>
      <detail-list-item term="手机号">{{wxUserInfo.mobile}}</detail-list-item>
      <detail-list-item term="所在地">{{wxUserInfo.country}}-{{wxUserInfo.province}}-{{wxUserInfo.city}}</detail-list-item>
    </detail-list>

    <a-col :span="4" style="padding-bottom: 11px">用户就诊患者列表：</a-col>
    <a-table
      rowKey="id"
      :columns="columns"
      :dataSource="patientInfo"
      class="j-table-force-nowrap">

        <span slot="action" slot-scope="text, record">
          <a @click="patientDetail(record)">详情</a>
        </span>
    </a-table>
  </a-card>
</template>

<script>
import PageLayout from '@/components/page/PageLayout'
import DetailList from '@/components/tools/DetailList'
import ABadge from "ant-design-vue/es/badge/Badge"
import { getAction } from '@api/manage'
const DetailListItem = DetailList.Item

export default {
  components: {
    PageLayout,
    ABadge,
    DetailList,
    DetailListItem,
  },
  data () {
    return {
      columns: [
        {
          title:'患者id',
          align:"center",
          dataIndex: 'id'
        },
        {
          title:'患者姓名',
          align:"center",
          dataIndex: 'name'
        },
        {
          title:'该患者与用户关系',
          align:"center",
          dataIndex: 'relation',
          customRender:function (res) {
            //关系 1本人 2子女 3父母 4夫妻
            var str = "未标示";
            if(res == 1){
              str = "本人";
            }else if(res == 2){
              str = "子女";
            }else if(res == 3){
              str = "父母";
            }else if(res == 4){
              str = "夫妻";
            }
            return str;
          }
        },
        {
          title:'问诊单数量',
          align:"center",
          dataIndex: 'inquiryNum'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align:"center",
          fixed:"right",
          width:147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        queryById: "/wuser/wxUserinfo/queryById",
        UserInfo: "/wuser/wxUserinfo/queryByUserInfo",
      },
      wxUserInfo:{},   //用户数据
      patientInfo:{},  //患者数据
    }
  },
  computed: {
    title () {
      return this.$route.meta.title
    }
  },
  created() {
    this.getWxUserInfoDetail(this.$route.params.id);
  },
  methods:{
    //加载用户信息、患者信息
    getWxUserInfoDetail(id){
      let param = {};
      param.id=id;

      getAction(this.url.UserInfo,param).then(res=>{
        this.wxUserInfo = res.result[0];
        this.patientInfo = res.result[1];
      })
    },
    //患者详情
    patientDetail(e){
      let id = e.id;//患者id
      this.$router.push(`/patientInfo/${id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  color: rgba(0,0,0,.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
</style>